<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #demo{
            width: 200px;
            height: 200px;
            background-color: purple;
        }
        .but{
            margin-top:10px;
        }
    </style>
</head>
<body>
    <div id="demo"></div>
    <button class="but" id="but1">宽400</button>
    <button class="but" id="but2">高400</button>
    <button class="but" id="but3">颜色</button>
    <button class="but" id="but4">关闭</button>
    <script>
        var demo =document.getElementById("demo");
        var but1 =document.getElementById("but1");
        var but2 =document.getElementById("but2");
        var but3 =document.getElementById("but3");
        var but4 =document.getElementById("but4");
        but1.onclick =function(){
            demo.style.width = "400px";
        }
        but2.onclick =function(){
            demo.style.height = "400px";
        }
        but3.onclick =function(){
            demo.style.backgroundColor = "yellow"
        }
        but4.onclick =function(){
            demo.style.display = "none";
        }
    </script>
</body>
</html>